<template>
	<view class="content">
		<!-- 轮播图 -->
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="swiper in swiperList" :key="swiper.id">
						<!-- <image :src="swiper.img" @tap="toSwiper(swiper)"></image> -->
						<image :src="swiper.img"></image>
					</swiper-item>
				</swiper>
				<view class="indicator">
					<view
						class="dots"
						v-for="(swiper, index) in swiperList"
						:class="[currentSwiper >= index ? 'on' : '']"
						:key="index"
					></view>
				</view>
				
			</view>
		</view>
		<!-- 广告位 -->
		<!-- <view class="ad-1">
			<image src="/static/temp/ad-1.png" @click="navOrder"></image>
			<image src="/static/temp/ad-2.png" @click="navTo"></image>
		</view> -->
		<view class="list-activity">
			<view   class="item" 
					v-for="(item, index) in activityList" :key="index"
				    @click="navToDetailPage(item)">
				<image :src="item.banner" class="left"></image>
				<view class="right">
					<view class="title" style="font-weight: 600;">
						<!-- <label class="ing">报名中</label>
						{{item.title}} -->
						<label class="ing" v-if="item.activity_status==='报名中'">报名中</label>
						<label class="full" v-if="item.activity_status==='已报满'">已报满</label>
						<label class="wait" v-if="item.activity_status==='等位中'">等位中</label>
						{{ item.title }}
						</view>
					
					<!-- <text class="subtitle">扣课2节 材料费{{item.sales}}元</text> -->
					<text class="subtitle">{{ item.subtitle }}</text>
				</view>
			</view>			
		</view>
		<!-- <uni-load-more :status="loadingType" ></uni-load-more>		 -->
		<uni-load-more :loadingType="loadingType" :contentText="contentText" v-if="activityList.length > 0"></uni-load-more>
		<noactive v-if="activityList.length <= 0"></noactive>
	</view>
</template>

<script>
	import { login, getWxConfig } from '../../api/index.js'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import noactive from '../../components/no-active.vue'
	import wx from '../jweixin/index.js'
	let page = 1;
	let timer = null;
	let that;
	export default {
		components: {
			uniLoadMore,
			noactive
		},
		data() {
			return {
				currentSwiper: 0,
				// 轮播图片
				// swiperList: [
				// 	{ id: 1, src: 'url1', img: '../../static/temp/banner1.jpg' },
				// 	{ id: 2, src: 'url2', img: '../../static/temp/banner2.jpg' },
				// 	{ id: 3, src: 'url3', img: '../../static/temp/banner3.jpg' },
				// 	{ id: 4, src: 'url4', img: '../../static/temp/banner4.jpg' }
				// ],
				swiperList: [
					{ id: 1, src: 'url1', img: 'https://oss.laiba.shop/system/images/title.jpg' }
					
				],
				headerPosition:"fixed",
				headerTop:"0px",
				// loadingType: 'more', //加载更多状态
				filterIndex: 0, 
				goodsList: [],
				
				loadingType: 0,//定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
				contentText: {
					contentdown:'上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				activityList: [], // 活动列表数据
				merch_id: '',
			};
		},
		
		onLoad(options){
			// #ifdef H5
			// 本地登录
			// this._login()
			that = this;
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
			this.getActivityList(); // 加载活动列表数据
			// #endif
			// this.loadCateList(options.fid,options.sid);
			// this.loadData();
			
		},
		// onShow() {
		// 	that = this;
		// 	this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
		// 	this.getActivityList(); // 加载活动列表数据
		// },
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			// if(e.scrollTop>=0){
			// 	this.headerPosition = "fixed";
			// }else{
			// 	this.headerPosition = "absolute";
			// }
		},
		//下拉刷新
		onPullDownRefresh(){
			// this.loadData('refresh');
			this.getActivityList() // 加载活动列表数据
		},
		//加载更多
		onReachBottom(){
			// this.loadData();
			if (timer != null) {
				clearTimeout(timer);
			}
			timer = setTimeout(function() {
				that._getActivityList();
			}, 300);
			// this._getActivityList() // 加载活动列表数据
		},
		methods: {
			_login() {
				login({mobile:13333333333,password:123456}, (res) => {
					console.log('用户' + res)
					if(res.data.code === 3) {
						uni.showToast({
				　　　　　　 title: res.data.message,
				　　　　　　 icon: 'none'
				　　　　 })
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/public/login'
							})
						},500)
					}
				},(err) => {
					uni.showToast({
			　　　　　　 title: err,
			　　　　　　 icon: 'none'
			　　　　 })
				})
			},
			navOrder() {
				uni.navigateTo({
					url: '/pages/order/order?state=0'
				})
			},
			navTo() {
				window.location.href = "http://laima.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=jiangli.userlist"
			},
			_getActivityList() {
				// let merch_id = this.$utils.getUrlParam('merch_id') || ''
				// console.log(merch_id)
				console.log(window.location.href)
				if (window.location.href.includes('?')) {
					console.log(window.location.href.split('=')[1])
					this.merch_id = window.location.href.split('=')[1] - 0
				} else {
					console.log(this.merch_id)
					this.merch_id = ''
				}
				if (that.loadingType !== 0) {//loadingType!=0;直接返回
					return false;
				}
				that.loadingType = 1;
				uni.showNavigationBarLoading();//显示加载动画
				uni.request({
					url: '/activity/activity/list', 
					method: 'GET',
					data: {p: page,length:10,merch_id: this.merch_id},
					success: (res) => {
						console.log(res.data.data.list)
						page++;
						that.activityList = that.activityList.concat(res.data.data.list)
						console.log(res.data.data.list.length)
						if (res.data.data.list.length < 10) {
							that.loadingType = -1;//将loadingType归0重置
						} else{
							that.loadingType = 0;
						}
						uni.hideNavigationBarLoading();//关闭加载动画
					}
				})
			},
			getActivityList() {
				// let merch_id = this.$utils.getUrlParam('merch_id') || ''
				console.log(window.location.href)
				if (window.location.href.includes('?')) {
					console.log(window.location.href.split('=')[1])
					this.merch_id = window.location.href.split('=')[1] - 0
				} else {
					this.merch_id = ''
				}
				page = 1;
				// that.loadingType = 0;
				uni.showNavigationBarLoading();
				uni.request({
					url: '/activity/activity/list', 
					method: 'GET',
					data: {p: 1,length:10,merch_id: this.merch_id},
					success: (res) => {
						console.log(res)
						if (res.data.code === 3) {
							uni.showToast({
					　　　　　　 title: res.data.message,
					　　　　　　 icon: 'none'
					　　　　 })
							// let url = encodeURIComponent(`https://mobile.laiba.shop/html/#/pages/active/list`)
							let url = encodeURIComponent(window.location.href)
							window.location.href = 'https://mobile.laiba.shop/activity/visitor/auth?url=' + url
						} else {
							this._getWxConfig() // 分享
							if (res.data.data.list.length < 10) {
								that.loadingType = -1;//将loadingType归0重置
							} else{
								that.loadingType = 0;
							}
							// console.log(res.data.data.list)
							page++;
							that.activityList = res.data.data.list
							uni.hideNavigationBarLoading();
							uni.stopPullDownRefresh();//得到数据后停止下拉刷新
						}
						
					}
				})
			},
			_getWxConfig() {
				getWxConfig({}, (res) => {
					console.log(res)
					let data = {
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.signature,// 必填，签名
						// jsApiList: ['updateAppMessageShareData','updateTimelineShareData','downloadImage'] ,// 必填，需要使用的JS接列表
						jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline','downloadImage'] // 必填，需要使用的JS接口列表
					}
					
					wx.config(data)
					wx.ready( () => {
						if (location.href.includes('?from')) {
							let sLink = location.href.split('?')
							window.location.href = 'https://mobile.laiba.shop/html/#/pages/active/list'
						}
						// this.newUrl = location.href
						wx.onMenuShareAppMessage({ 
						    title: '来爸来妈优选', // 分享标题
						    desc: '点击进入', // 分享描述
						    link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
							imgUrl: 'http://oss.laiba.shop/activity/20191216/openproxy.jpeg', // 分享图标
						    success: () => {
						      // 设置成功
							  uni.showToast({
							  	title: '分享成功',
								icon: 'none'
							  })
						    }
						})
						wx.onMenuShareTimeline({
							title: '来爸来妈优选', // 分享标题
							link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
							imgUrl: 'http://oss.laiba.shop/activity/20191216/openproxy.jpeg', // 分享图标
							success: () => {
							  // 设置成功
							  uni.showToast({
							  	title: '分享成功',
								icon: 'none'
							  })
							}
						})
					})
				})
			},
			//轮播图跳转
			toSwiper(e) {
				uni.showToast({ title: e.src, icon: 'none' });
			},
			//轮播图指示器
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			},
			//加载分类
			// async loadCateList(fid, sid){
			// 	let list = await this.$api.json('cateList');
			// 	let cateList = list.filter(item=>item.pid == fid);
				
			// 	cateList.forEach(item=>{
			// 		let tempList = list.filter(val=>val.pid == item.id);
			// 		item.child = tempList;
			// 	})
			// 	this.cateList = cateList;
			// },
			//加载商品 ，带下拉刷新和上滑加载
			// async loadData(type='add', loading) {
			// 	//没有更多直接返回
			// 	if(type === 'add'){
			// 		if(this.loadingType === 'nomore'){
			// 			return false;
			// 		}
			// 		this.loadingType = 'loading';
			// 	}else{
			// 		this.loadingType = 'more' 
			// 	}
				
			// 	let goodsList = await this.$api.json('goodsList');
			// 	if(type === 'refresh'){
			// 		this.goodsList = [];
			// 	}
			// 	//筛选，测试数据直接前端筛选了
			// 	if(this.filterIndex === 1){
			// 		goodsList.sort((a,b)=>b.sales - a.sales)
			// 	}
			// 	if(this.filterIndex === 2){
			// 		goodsList.sort((a,b)=>{
			// 			if(this.priceOrder == 1){
			// 				return a.price - b.price;
			// 			}
			// 			return b.price - a.price;
			// 		})
			// 	}
				
			// 	this.goodsList = this.goodsList.concat(goodsList);
				
			// 	//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
			// 	this.loadingType  = this.goodsList.length > 20 ? 'nomore' : 'more';
			// 	if(type === 'refresh'){
			// 		if(loading == 1){
			// 			uni.hideLoading()
			// 		}else{
			// 			uni.stopPullDownRefresh();
			// 		}
			// 	}
			// },
			//详情
			navToDetailPage(item){
				//测试数据没有写id，用title代替
				let id = item.title;
				console.log(item)
				uni.navigateTo({
					url: `/pages/active/detail?id=` + item.id
				})
			},
			stopPrevent(){}
		},
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
	.content{
		padding-top: $page-row-spacing;
		/* #ifdef APP-PLUS*/
			padding-top: calc(var(--status-bar-height) + 36upx);
		/* #endif */
		/* #ifdef MP*/
			padding-top:0;
		/* #endif */
	}

	/* 顶部轮播图 */
	.swiper {
		width: 100%;
		display: flex;
		justify-content: center;
		.swiper-box {
			width: 100%;
			height: 30.4vw;	
			overflow: hidden;
			border-radius: 15upx;
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;
			margin: 0 $page-row-spacing;
			swiper {
				width: 100%;
				height: 30.5vw;
				swiper-item {
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			.indicator {
				position: absolute;
				bottom: 20upx;
				right: 20upx;
				background-color: rgba(255, 255, 255, 0.4);
				width: 150upx;
				height: 5upx;
				border-radius: 3upx;
				overflow: hidden;
				display: flex;
				.dots {
					width: 0upx;
					background-color: rgba(255, 255, 255, 1);
					transition: all 0.3s ease-out;
					&.on {
						width: (100%/4);
					}
				}
			}
		}
	}
	/* 广告位 */
	.ad-1{
		width: 100%;
		height: 24vw; 
		padding: 17rpx 25rpx;
		display: flex;
		margin-top: 16rpx;
		image{
			width: 0;
			flex: 1;
			margin: 0 11rpx;
			height: 100%;
			border-radius: 12rpx;
		}
	}
	/*活动列表*/
	.list-activity{
		// padding:$page-row-spacing;
		padding: 22rpx 38rpx;
		.item{
			padding: 14upx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-shadow: 0px 10rpx 34rpx 0px rgba(0, 0, 0, 0.06);
			padding: 24rpx;
			margin-bottom: 20rpx;
			border-radius: 12rpx;
			background-color: #fff;
			.left{
				width: 200upx;
				height: 150upx;
				border-radius:12upx;
				 overflow: hidden;
			} 
			.right{
				margin-left: 20upx;
				flex: 1;
				.title{
					font-size: 28upx;
					color: $font-color-dark;
					height: 40px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					label{
						display: inline-block;
						font-size: 20upx;
						border-radius: 4upx;
						margin-right: 14upx;
						padding: 8upx 12upx;
						line-height:17upx;
						height: 30upx;
						&.ing{
							background: linear-gradient(to right, #42e55e , #36d248);
							color: #fff;
						}
						&.done{
							background: #e5e5e5;
							color: #989898;
						}
						&.full{
							background: linear-gradient(to right, #fb4d69 , #ff4455);
							color: #fff;
						}
						&.wait{
							background: linear-gradient(to right, #ff9e2c , #fe8700);
							color: #fff;
						}
					}
				}
				.subtitle{
					font-size: 22upx;
					color: #b3b3b3;
					margin-top:24upx;
					display: inline-block;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				
			}
		}
		
	}
	

</style>
